<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
</head>

<title>单词抢答</title>
<link rel="stylesheet" href="css/index.css" />
<!-- 引入 layui.css -->
<link rel="stylesheet" href="css/layui.css" />
<!-- 引入 layui.js -->
<script src="js/layui.js"></script>
<script src="js/xlsx.full.min.js"></script>

<body>
	<div class="container">
		<div class="main">
			<div class="timing">
				<p id="countdown">7</p>
			</div>
			<div class="goal">
				<p id="goal">题目</p>
			</div>
			<div class="answerset">
				<div class="answera1" id="resulta1" onclick="resulta1()">
					<p id="answera1">null</p>
				</div>

				<div class="answera2" id="resulta2" onclick="resulta2()">
					<p id="answera2">null</p>
				</div>
				<div class="answera3" id="resulta3" onclick="resulta3()">
					<p id="answera3">null</p>
				</div>
				<div class="answera4" id="resulta4" onclick="resulta4()">
					<p id="answera4">null</p>
				</div>

				<div id="boundary">
					<img src="img/2333.gif" id="imgboundary" />
				</div>
				<div class="answerb4" id="resultb4" onclick="resultb4()">
					<p id="answerb4">null</p>
				</div>
				<div class="answerb3" id="resultb3" onclick="resultb3()">
					<p id="answerb3">null</p>
				</div>
				<div class="answerb2" id="resultb2" onclick="resultb2()">
					<p id="answerb2">null</p>
				</div>
				<div class="answerb1" id="resultb1" onclick="resultb1()">
					<p id="answerb1">null</p>
				</div>

			</div>

			<div class="partition">
			</div>
			<div class="main2">
				<div class="figure1">
					<div id="fig1">

					</div>
				</div>
				<div class="outcome">
					<div id="win">
						<p id="userName1">玩家一</p>
						<p style="font-size: 10px;">生命剩余：
						<p id="hp1">未识别</p>
						</p>
					</div>
					<div id="lose">
						<p id="userName2">玩家二</p>
						<p style="font-size: 10px;">生命剩余：
						<p id="hp2">未识别</p>
						</p>
					</div>
				</div>
				<div class="figure2">
					<div id="fig2"></div>
				</div>
			</div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="footer">© 2021 by 问雪</div>
	<input type="file" id="database" onclick="gamebgm()"/>
	<audio autoplay src="/sound/start.mp3" id="bgm"></audio>
	<audio autoplay src="/sound/start.mp3" id="correctbgm"></audio>
	<audio autoplay src="/sound/start.mp3" id="errorbgm"></audio>
</body>
<script>
	//new 一个 FileReader对象
	var reader = new FileReader();
	//表格对象
	var wordObj = null;
	//随机数去重列表
	var list = new Array();
	//血dom
	var hp1 = document.getElementById("hp1");
	var hp2 = document.getElementById("hp2");
	//计算血
	var hp1Result = 0;
	var hp2Result = 0;
	//正确答案
	var rightAnswers = "";
	//玩家名称
	var name1 = "";
	var name2 = "";
	//玩家颜色
	var color1 = document.getElementById("win").style;
	var color2 = document.getElementById("lose").style;
	//角色图片
	var imgList = new Array();
	imgList[0] = "url(img/1.png)"
	imgList[1] = "url(img/2.png)"
	imgList[2] = "url(img/3.png)"
	imgList[3] = "url(img/4.png)"
	imgList[4] = "url(img/5.png)"
	imgList[5] = "url(img/6.png)"
	imgList[6] = "url(img/7.png)"
	imgList[7] = "url(img/8.png)"
	imgList[8] = "url(img/9.png)"
	imgList[9] = "url(img/10.png)"
	imgList[10] = "url(img/11.png)"
	imgList[11] = "url(img/12.png)"
	document.getElementById("fig1").style.backgroundImage = imgList[Math.floor(Math.random() * 12) + 1];
	document.getElementById("fig2").style.backgroundImage = imgList[Math.floor(Math.random() * 12) + 1];


	//打断器
	var run = true;
	//表格数组
	var arr3 = [];
	//结束打断
	var overRun = true;
	//正确bgm
	var correctbgms = 0;
	//错误bgm
	var errorbgms = 0;
	//开始bgm
	var gamebgms = 0;
	//读取完成后监听回调
	
	reader.onload = function (e) {
		var data = e.target.result;
		var wb = XLSX.read(data, {
			type: 'binary'
		});
		//通过SheetName[0]得到第一个sheet的名字
		//sheet:单元格对象
		var sheet1name = wb.SheetNames[0];
		//取出第一个sheet
		var sheet1 = wb.Sheets[sheet1name];
		//调用XLSX.utils.sheet_to_json方法吧sheet转为json
		var jsons = XLSX.utils.sheet_to_json(sheet1);
		//json作为全局变量

		for (let i in jsons) {
			arr3[i] = [];
			for (let j in jsons[i]) {
				arr3[i].push(jsons[i][j]);
			}
		}
		wordObj = jsons;
		main();
	}

	//读取单词数据库
	document.getElementById("database").onchange = function (e) {
		/*
		当调用XLSX读取excel的二进制数据类型的时候必须指明数据类型
		上面'wb'二进制数据是通过readAsBinaryString方法读取的
		所以type应该传入binary
		如果是readAsArrayBuffer那么对应的type应该改为'array'
		*/
		reader.readAsBinaryString(e.target.files[0])
	}

	function main() {

		var userName1 = document.getElementById("userName1");
		var userName2 = document.getElementById("userName2");
		name1 = prompt("请输入玩家一名称：");
		name2 = prompt("请输入玩家二名称：");
		userName1.innerHTML = name1;
		userName2.innerHTML = name2;

		var count2 = 0;
		Object.keys(wordObj).forEach(key => {
			count2++;
		})
		hp1.innerHTML = parseInt(count2 / 2);
		hp2.innerHTML = parseInt(count2 / 2);
		hp1Result = parseInt(count2 / 2);
		hp2Result = parseInt(count2 / 2);

		alert("信息加载完成！游戏开始！");

		countdown();

	}

	//倒计时
	function countdown() {

		var seconds = document.getElementById("countdown");
		seconds.innerHTML = 7;
		if (run == false) {
			run = true;
			return;
		}
		topicAnswer();

		setInterval(function () {
			var i = seconds.innerHTML;
			if (i > 0) {
				i--;
				seconds.innerHTML = i;
			} else {
				hp1Result--;
				hp2Result--;
				hp1.innerHTML = hp1Result;
				hp2.innerHTML = hp2Result;
				if (hp1Result == 0 && hp2Result == 0) {
					over();

				}
				if (hp1Result <= 0) {
					over();

				} else if (hp2Result <= 0) {
					over();


				} else {
					console.log("无人失败，游戏继续");
				}
				seconds.innerHTML = 7;
				topicAnswer();
			}
		}, 1000);


	}

	//题目与答案
	function topicAnswer() {

		var goal = document.getElementById("goal");
		var answera1 = document.getElementById("answera1");
		var answera2 = document.getElementById("answera2");
		var answera3 = document.getElementById("answera3");
		var answera4 = document.getElementById("answera4");

		//p2
		var answerb1 = document.getElementById("answerb1");
		var answerb2 = document.getElementById("answerb2");
		var answerb3 = document.getElementById("answerb3");
		var answerb4 = document.getElementById("answerb4");

		var count = 0;
		//遍历对象属性
		Object.keys(wordObj).forEach(key => {
			count++;
		})
		console.log("列表长度" + count)
		count--;
		var num = Math.round(Math.random() * count);
		//去重
		if (list.indexOf(num) == -1) {
			list.push(num);
			console.log(num + "添加成功");
			//出现的词语不再出现
			goal.innerHTML = wordObj[num]["题目单词"];
			answera1.innerHTML = wordObj[num]["答案一"];
			answera2.innerHTML = wordObj[num]["答案二"];
			answera3.innerHTML = wordObj[num]["答案三"];
			answera4.innerHTML = wordObj[num]["答案四"];
			//p2
			answerb1.innerHTML = wordObj[num]["答案一"];
			answerb2.innerHTML = wordObj[num]["答案二"];
			answerb3.innerHTML = wordObj[num]["答案三"];
			answerb4.innerHTML = wordObj[num]["答案四"];
			rightAnswers = wordObj[num]["正确答案"];
			console.log("===================")
		} else {
			console.log(num + "重复")
			topicAnswer()
		}

	}
	
	//测试方法
	function resulta1() {
		correctbgm();
		var bgm2 = document.getElementById("bgm");
		console.log("麻了")
		bgm2.play();
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answera1");
		console.log("正确答案" + rightAnswers);
		console.log("你选择的" + answer1.innerHTML);
		if (answer1.innerHTML == rightAnswers) {
			hp2.innerHTML = --hp2Result;

			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			console.log("回答正确");
			correctbgm();
		} else {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			console.log("回答错误");
			errorbgm();
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resulta2() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answera2");
		console.log("正确答案" + rightAnswers);
		console.log("你选择的" + answer1.innerHTML);
		if (answer1.innerHTML == rightAnswers) {
			hp2.innerHTML = --hp2Result;

			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			correctbgm();
			console.log("回答正确");
		} else {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			errorbgm();
			console.log("回答错误");
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resulta3() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answera3");
		console.log("正确答案" + rightAnswers);
		console.log("你选择的" + answer1.innerHTML);
		if (answer1.innerHTML == rightAnswers) {
			hp2.innerHTML = --hp2Result;

			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			console.log("回答正确");
			correctbgm();
		} else {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			console.log("回答错误");
			errorbgm();
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resulta4() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answera4");
		console.log("正确答案" + rightAnswers);
		console.log("你选择的" + answer1.innerHTML);
		if (answer1.innerHTML == rightAnswers) {
			hp2.innerHTML = --hp2Result;

			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			console.log("回答正确");
			correctbgm();
		} else {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			console.log("回答错误");
			errorbgm();
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resultb1() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answerb1");
		console.log("正确答案" + rightAnswers)
		console.log("你选择的" + answer1.innerHTML)
		if (answer1.innerHTML == rightAnswers) {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			correctbgm();
			console.log("回答正确");
		} else {
			hp2.innerHTML = --hp2Result;
			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			errorbgm();
			console.log("回答错误");
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}


	function resultb2() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answerb2");
		console.log("正确答案" + rightAnswers)
		console.log("你选择的" + answer1.innerHTML)
		if (answer1.innerHTML == rightAnswers) {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			correctbgm();
			console.log("回答正确");
		} else {
			hp2.innerHTML = --hp2Result;
			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			errorbgm();
			console.log("回答错误");
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resultb3() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answerb3");
		console.log("正确答案" + rightAnswers)
		console.log("你选择的" + answer1.innerHTML)
		if (answer1.innerHTML == rightAnswers) {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			correctbgm();
			console.log("回答正确");
		} else {
			hp2.innerHTML = --hp2Result;
			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			errorbgm();
			console.log("回答错误");
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}

	function resultb4() {
		console.log("开始答题");
		var goal = document.getElementById("goal");
		var answer1 = document.getElementById("answerb4");
		console.log("正确答案" + rightAnswers)
		console.log("你选择的" + answer1.innerHTML)
		if (answer1.innerHTML == rightAnswers) {
			hp1.innerHTML = --hp1Result;
			color2.backgroundColor = "#F39B6D";
			color1.backgroundColor = "#A6D9F7";
			correctbgm();
			console.log("回答正确");
		} else {
			hp2.innerHTML = --hp2Result;
			color1.backgroundColor = "#F39B6D";
			color2.backgroundColor = "#A6D9F7";
			errorbgm();
			console.log("回答错误");
		}

		if (hp1Result <= 0) {
			over();
		} else if (hp2Result <= 0) {
			over();
		} else {
			console.log("无人失败，游戏继续");
		}
		run = false;
		countdown();
	}
	/* 控制下雪 */
	function snowFall(snow) {
		/* 可配置属性 */
		snow = snow || {};
		this.maxFlake = snow.maxFlake || 10; /* 最多片数 */
		this.flakeSize = snow.flakeSize || 5; /* 雪花形状 */
		this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */
	}
	/* 兼容写法 */
	requestAnimationFrame = window.requestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		function (callback) {
			setTimeout(callback, 200 / 60);
		};

	cancelAnimationFrame = window.cancelAnimationFrame ||
		window.mozCancelAnimationFrame ||
		window.webkitCancelAnimationFrame ||
		window.msCancelAnimationFrame ||
		window.oCancelAnimationFrame;
	/* 开始下雪 */
	snowFall.prototype.start = function () {
		/* 创建画布 */
		snowCanvas.apply(this);
		/* 创建雪花形状 */
		createFlakes.apply(this);
		/* 画雪 */
		drawSnow.apply(this)
	}
	/* 创建画布 */
	function snowCanvas() {
		/* 添加Dom结点 */
		var snowcanvas = document.createElement("canvas");
		snowcanvas.id = "snowfall";
		snowcanvas.width = window.innerWidth;
		snowcanvas.height = document.body.clientHeight;
		snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
		document.getElementsByTagName("body")[0].appendChild(snowcanvas);
		this.canvas = snowcanvas;
		this.ctx = snowcanvas.getContext("2d");
		/* 窗口大小改变的处理 */
		window.onresize = function () {
			snowcanvas.width = window.innerWidth;
			/* snowcanvas.height = window.innerHeight */
		}
	}
	/* 雪运动对象 */
	function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
		this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */
		this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */
		this.size = Math.random() * flakeSize + 2; /* 形状 */
		this.maxSize = flakeSize; /* 最大形状 */
		this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */
		this.fallSpeed = fallSpeed; /* 坠落速度 */
		this.velY = this.speed; /* Y方向速度 */
		this.velX = 0; /* X方向速度 */
		this.stepSize = Math.random() / 30; /* 步长 */
		this.step = 0 /* 步数 */
	}
	flakeMove.prototype.update = function () {
		var x = this.x,
			y = this.y;
		/* 左右摆动(余弦) */
		this.velX *= 0.98;
		if (this.velY <= this.speed) {
			this.velY = this.speed
		}
		this.velX += Math.cos(this.step += .05) * this.stepSize;

		this.y += this.velY;
		this.x += this.velX;
		/* 飞出边界的处理 */
		if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
			this.reset(canvas.width, canvas.height)
		}
	};
	/* 飞出边界-放置最顶端继续坠落 */
	flakeMove.prototype.reset = function (width, height) {
		this.x = Math.floor(Math.random() * width);
		this.y = 0;
		this.size = Math.random() * this.maxSize + 2;
		this.speed = Math.random() * 1 + this.fallSpeed;
		this.velY = this.speed;
		this.velX = 0;
	};
	// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
	flakeMove.prototype.render = function (ctx) {
		var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
		snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色，默认是白色 */
		snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
		snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */
		ctx.save();
		ctx.fillStyle = snowFlake;
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
		ctx.fill();
		ctx.restore();
	};
	/* 创建雪花-定义形状 */
	function createFlakes() {
		var maxFlake = this.maxFlake,
			flakes = this.flakes = [],
			canvas = this.canvas;
		for (var i = 0; i < maxFlake; i++) {
			flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
		}
	}
	/* 画雪 */
	function drawSnow() {
		var maxFlake = this.maxFlake,
			flakes = this.flakes;
		ctx = this.ctx, canvas = this.canvas, that = this;
		/* 清空雪花 */
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		for (var e = 0; e < maxFlake; e++) {
			flakes[e].update();
			flakes[e].render(ctx);
		}
		/*  一帧一帧的画 */
		this.loop = requestAnimationFrame(function () {
			drawSnow.apply(that);
		});
	}
	/* 调用及控制方法 */
	var snow = new snowFall({
		maxFlake: 500
	});
	snow.start();

	function over() {
		if (overRun == true) {
			if (hp1Result == 0 && hp2Result == 0) {
				alert("这俩人一个题目都答不上来，同归于尽了属于是，游戏结束！");
			}
			else if (hp1Result <= 0) {
				alert(name1 + "血量耗尽，" + name2 + "获得游戏胜利！");
			} else if (hp2Result <= 0) {
				alert(name2 + "血量耗尽，" + name1 + "获得游戏胜利！");

			}
			document.write("<h1>单词表</h1>");
			//该大的for循环是输出表格化部分的代码；
			document.write("<table border='1'>"); //该代码是指：使输出信息表格化的 table 表格中的 <table></table> 标签；
			document.write('<tr>');
			document.write('<td>' + "题目" + '</td>');
			document.write('<td>' + "答案一" + '</td>');
			document.write('<td>' + "答案二" + '</td>');
			document.write('<td>' + "答案三" + '</td>');
			document.write('<td>' + "答案四" + '</td>');
			document.write('<td>' + "正确答案" + '</td>');
			document.write('</tr>');
			for (var i = 0; i < arr3.length; i++) { //该部分是外循环，即arr3[i]，是外层的一维数组；
				document.write('<tr>'); //该代码是指：table 表格中的  <tr></tr>  标签；
				for (var j = 0; j < arr3[i].length; j++) { //该部分是内循环，即arr3[i][j]，是内层的二维数组；
					document.write('<td>' + arr3[i][j] + '</td>'); //该代码是指：table 表格中的  <td></td>  标签；
				}
				document.write('</tr>');
			}
			document.write('</table>');
			overRun = false;
		}

	}

	function correctbgm(){
		var audio = document.getElementById("correctbgm");
		audio.src = "audio/correct.mp3";
		if (correctbgms == 0) {
			audio.play();
			correctbgms++
		}
		correctbgms = 0;
	}
	function errorbgm(){
		var audio = document.getElementById("errorbgm");
		audio.src = "audio/error.mp3";
		if (errorbgms == 0) {
			audio.play();
			errorbgms++
		}
		errorbgms = 0;
	}
	function gamebgm(){
		var audio = document.getElementById("bgm");
		audio.src = "audio/start.mp3";
		audio.volume = 0.4;
		if (gamebgms == 0) {
			audio.play();
			gamebgms++
		}
		gamebgms = 0;
	}
</script>

</html>